<template>
  <div>
    <el-row :gutter="10" class="mb8">
    <el-col :span="1.5" class="leftCell" style="margin-top: 5px;margin-bottom: 5px">
      <slot></slot>
    </el-col>
    </el-row>
    <!-- 主表内容 -->
    <el-table v-loading="dataListLoading" 
      ref="Table" 
      class="purchaseTable" 
      :row-key="getRowKey" 
      :data="tableData" 
      border
      style="width: 100%" 
      @selection-change="dataListSelectionChangeHandle" 
      @select="selectChangeHandle"
      @select-all="selectChangeHandle">
      <el-table-column v-if="showSelection" type="selection" header-align="center" align="center"
        width="50"></el-table-column>
      <el-table-column label="序号" width="50px" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label || $t('handle')"
        :width="item.width" :min-width="item.minWidth" :header-align="item.headerAlign || 'center'"
        :align="item.align || 'center'" :fixed="item.fixed || false" :sortable="item.sortable || false"
        show-overflow-tooltip>
        
        <template slot-scope="scope">

          <template v-if="item.type==='checkQty'">
            <el-input v-model="scope.row[item.prop]"></el-input>
          </template>
          <template v-if="item.type === 'orderStatus'">
            <el-tag size="small" v-if="scope.row[item.prop] === 0">初始</el-tag>
            <el-tag size="small" v-if="scope.row[item.prop] === 1" type="warning">备货中</el-tag>
            <el-tag size="small" v-if="scope.row[item.prop] === 2" type="warning">备货完成</el-tag>
            <el-tag size="small" v-if="scope.row[item.prop] === 3" type="warning">出库中</el-tag>
            <el-tag size="small" v-if="scope.row[item.prop] === 4" type="success">出库完成</el-tag>
            <el-tag size="small" v-if="scope.row[item.prop] === 9" type="success">单据撤销</el-tag>
          </template>
          <template v-else-if="item.type === 'lockStatus'">
            <el-tag v-if="scope.row.lockSt === 0">可用</el-tag>
            <el-tag v-else type="warning">冻结</el-tag>
          </template>
          <template v-else-if="item.type === 'purchaseStatus'">
            <el-tag size="small" v-if="scope.row.detailSt === 0">初始</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 1" type="warning">收货中</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 2" type="success">收货完成</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 4" type="warning">强制完成</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 9" type="warning">废弃</el-tag>
            <el-tag size="small" v-else type="danger">未知状态</el-tag>
          </template>
          <template v-else-if="item.type === 'detailStatus'">
            <el-tag v-if="scope.row[item.prop] === 0">初始</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 1">收货中</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 2" type="success">已完成</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 9" type="warning">废弃</el-tag>
            <el-tag v-else type="danger">异常</el-tag>
          </template>
          <template v-else-if="item.type === 'detailStatus2'">
            <el-tag size="small" v-if="scope.row[item.prop] === 0">初始</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 1" type="warning">执行中</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 2" type="success">出庫完成</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 3" type="success">待领料</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 4" type="success">转库完成</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 9" type="error">废弃</el-tag>
            <el-tag size="small" v-else type="danger">异常</el-tag>
          </template>
          <template v-else-if="item.type === 'detailStatus3'">
            <el-tag size="small" v-if="scope.row[item.prop] === 0">未出库</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 1">已出库</el-tag>
            <el-tag size="small" v-else type="danger">异常</el-tag>
          </template>
          <template v-else-if="item.type === 'isUg'">
            <el-tag size="small" v-if="scope.row[item.prop] === 1" type="danger">是</el-tag>
            <el-tag size="small" v-else type="info">否</el-tag>
          </template>
          <template v-else-if="item.type === 'locateStatus'">
            <el-tag size="small" v-if="scope.row[item.prop] === 0">空闲</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 1" type="warning">预分配</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 2" type="success">已使用</el-tag>
            <el-tag size="small" v-else type="danger">异常</el-tag>
          </template>
          <template v-else-if="item.type === 'locateType'">
            <el-tag size="small" v-if="scope.row[item.prop] === 'HW'">货位</el-tag>
            <el-tag size="small" v-else type="warning">站台</el-tag>
          </template>
          <template v-else-if="item.type === 'locateActive'">
            <el-tag size="small" v-if="scope.row[item.prop] === 0" type="danger">禁用</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 1" type="success">可用</el-tag>
            <el-tag size="small" v-else type="danger">异常</el-tag>
          </template>
          <template v-else-if="item.type === 'lackQty'">
            <el-tag size="small" v-if="scope.row[item.prop] === 0" type="success">{{ scope.row[item.prop] }}</el-tag>
            <el-tag size="small" v-else type="danger">{{ scope.row[item.prop] }}</el-tag>
          </template>
          <template v-else-if="item.type === 'stockStatus'">
            <el-tag size="small" v-if="scope.row[item.prop] === 0">空闲</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 1" type="warning">预分配</el-tag>
          </template>
          <template v-else-if="item.type === 'changeStatus'">
            <el-switch v-model="scope.row[item.prop]" @change="changeStatus($event, scope.row)" active-color="#13ce66"
              inactive-color="#ff4949" :active-value="0" :inactive-value="1"></el-switch>
          </template>
          <template v-else-if="item.type === 'changeLockSt'">
            <el-switch v-model="scope.row[item.prop]" @change="changeLockSt($event, scope.row)" active-color="#13ce66"
              inactive-color="#ff4949" :active-value="0" :inactive-value="1"></el-switch>
          </template>
          <template v-else-if="item.type === 'changeStation'">
            <el-switch v-model="scope.row[item.prop]" @change="changeStation($event, scope.row)" active-color="#13ce66"
              inactive-color="#ff4949" :active-value="0" :inactive-value="1"></el-switch>
          </template>
          <template v-else-if="item.type === 'taskTypeStatus'">
            <el-tag v-if="scope.row[item.prop] === '01'">入库</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === '02'">出库</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === '03'">移动</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === '05'">盘点</el-tag>
            <el-tag v-else type="danger">未知场景</el-tag>
          </template>
          <template v-else-if="item.type === 'taskSubTypeStatus'">
            <el-tag v-if="scope.row[item.prop] === '011'" type="info">整托入库</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === '012'" type="info">拣选回库</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === '013'" type="info">余料回库</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === '014'" type="info">空框入库</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === '021'" type="info">整托出库</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === '022'" type="info">拣选出库</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === '023'" type="info">合料出库</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === '024'" type="info">空框出库</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === '031'" type="info">库内移动</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === '051'" type="info">盘点回库</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === '052'" type="info">盘点出库</el-tag>
            <el-tag v-else type="danger">未知场景</el-tag>
          </template>
          <template v-else-if="item.type === 'taskStatus'">
            <el-tag v-if="scope.row[item.prop] === 0">初始</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 1" type="warning">执行中</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 2" type="success">已完成</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 9" type="info">取消</el-tag>
            <el-tag v-else type="danger">异常</el-tag>
          </template>
          <template v-else-if="item.type === 'trkStatus'">
            <el-tag v-if="scope.row[item.prop] === 0">初始</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 1" type="warning">已下发</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 2" type="success">已完成</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 9" type="danger">异常</el-tag>
            <el-tag v-else type="danger">未知状态</el-tag>
          </template>
          <template v-else-if="item.type === 'trkType'">
            <el-tag v-if="scope.row[item.prop] === 'IN'">入库</el-tag>
            <el-tag v-else-if="scope.row[item.prop] === 'OT'" type="warning">出库</el-tag>
            <el-tag v-else type="danger">未知类型</el-tag>
          </template>
          <template v-else-if="item.type === 'useStatus'">
            <el-tag size="small" v-if="scope.row[item.prop] === 0" type="success">可用</el-tag>
            <el-tag size="small" v-else type="warning">不可用</el-tag>
          </template>
          <template v-else-if="item.type === 'statusTag'">
            <el-tag size="small" v-if="scope.row.detailSt === 0">收貨</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 1" type="warning">收货中</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 2" type="success">收货完成</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 4" type="warning">强制完成</el-tag>
            <el-tag size="small" v-else-if="scope.row[item.prop] === 9" type="warning">撤銷</el-tag>
            <el-tag size="small" v-else type="danger">未知状态</el-tag>
          </template>
          <template v-else-if="item.type === 'contType'">
            <span v-if="scope.row[item.prop] === '3' " >16格</span>
            <span v-if="scope.row[item.prop] === '2' " >10格</span>
            <span v-if="scope.row[item.prop] === '1' " >其他</span>
          </template>
          <template v-else-if="item.type === 'isFull'">
            <el-tag size="small" v-if="scope.row[item.prop] === 1" type="danger">是</el-tag>
            <el-tag size="small" v-else type="success">否</el-tag>
          </template>
          <template v-else-if="item.type === 'handle'">
            <template v-if="item.handleType === 'handle-2'">
              <el-button v-if="!item.permissionName || $hasPermission(`wms:${item.permissionName}:update`)" type="text"
                size="small" @click="addOrUpdateHandle(scope.row[item.id])">{{ $t("update") }}</el-button>
              <el-button v-if="!item.permissionName || $hasPermission(`wms:${item.permissionName}:delete`)" type="text"
                size="small" @click="deleteHandle(scope.row[item.id])">{{ $t("delete") }}</el-button>
            </template>
            <template v-if="item.handleType === 'handle-1'">
              <el-button v-if="!item.permissionName || $hasPermission(`wms:${item.permissionName}:delete`)" type="text"
                size="small" @click="deleteHandle(scope.row[item.id])">{{ $t("delete") }}</el-button>
            </template>
            <template v-else-if="item.handleType === 'handle-3'">
              <el-button v-if="!item.permissionName || $hasPermission(`wms:${item.permissionName}:manual-allot`)" type="text"
                size="small" @click="distributionHandle(scope.row)">{{ $t("manualAllot") }}</el-button>
              <el-button v-if="!item.permissionName || $hasPermission(`wms:${item.permissionName}:allot-info`)" type="text"
                size="small" @click="allotDetailsHandle(scope.row)">{{ $t("allotInfo") }}</el-button>
            </template>
            <template v-else-if="item.handleType === 'handle-4'">
              <el-button v-if="item.handleType === 'handle-4'" type="text"
                size="small" @click="allotCheckHandle(scope.row)">确认</el-button>
            </template>
            <template v-else>
              <el-button v-if="!item.permissionName || $hasPermission(`wms:${item.permissionName}:update`)" type="text"
                size="small" @click="addOrUpdateHandle(scope.row)">{{ $t("update") }}</el-button>
            </template>
          </template>
          <template v-else>
            {{ scope.row[item.prop] }}
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
      layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
      @current-change="pageCurrentChangeHandle">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableColumn: {
      type: Array,
      default: () => []
    },
    moduleOptions: {
      type: Object,
      default: () => { }
    },
    showSelection: {
      type: Boolean,
      default: false
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 1
    },
    dataListLoading: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    moduleOptions: {
      handler(val) {
        this.mixinViewModuleOptions = { ...val }
      },
      immediate: true
    },
  },
  computed: {

  },
  data() {
    return {
      advanced: false,
      mixinViewModuleOptions: {
        createdIsNeed: true,       // 此页面是否在创建时，调用查询数据列表接口？
        activatedIsNeed: false,    // 此页面是否在激活（进入）时，调用查询数据列表接口？
        getDataListURL: '',       // 数据列表接口，API地址
        getDataListIsPage: false, // 数据列表接口，是否需要分页？
        deleteURL: '',            // 删除接口，API地址
        deleteIsBatch: false,     // 删除接口，是否需要批量？
        deleteIsBatchKey: 'id',   // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
        exportURL: ''             // 导出接口，API地址
      },
      expands: [],
      getRowKey(row) {
        return row.detailId || row.purchaseId || row.spuId;
      },
      num: 0
    }
  },
  methods: {
    pageSizeChangeHandle(val) {
      this.$emit('pageSizeChangeHandle', val)
    },
    pageCurrentChangeHandle(val) {
      this.$emit('pageCurrentChangeHandle', val)
    },
    // 按钮操作
    // opreate(row) {
    //   this.$emit('opreate', row)
    // },
    selectChangeHandle(selection, row) {
      this.$emit('selectChangeHandle', selection, row)
    },
    addOrUpdateHandle(rowId) {
      this.$emit('addOrUpdateHandle', rowId)
    },
    distributionHandle(rowId) {
      this.$emit('distributionHandle', rowId)
    },
    allotDetailsHandle(rowId){
      this.$emit('allotDetailsHandle',rowId)
    },
    allotCheckHandle(rowId){
      this.$emit('allotCheckHandle',rowId)
    },
    deleteHandle(row) {
      this.$emit('deleteHandle', row)
    },
    dataListSelectionChangeHandle(val) {
      this.$emit('dataListSelectionChangeHandle', val)
    },
    changeStatus(e, row) {
      this.$emit('changeStatus', e, row)
    },
    changeLockSt(e, row) {
      this.$emit('changeLockSt', e, row)
    },
    changeStation(e, row) {
      this.$emit('changeStation', e, row)
    },
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */

</style>